<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<el-table :data="scores" border highlight-current-row style="width: 100%">
					<el-table-column prop="scoreTerm" label="学期">
					</el-table-column>
					<el-table-column prop="course.courseTitle" label="所属课程">
					</el-table-column>
					<el-table-column prop="scoreRemark" label="备注">
					</el-table-column>
					<el-table-column prop="scoreDate" label="所属日期">
					</el-table-column>
					<el-table-column prop="scoreTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showRecord(scope.row)" type="text" size="small">查看目标项</el-button>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<el-table :data="records" border highlight-current-row style="width: 100%">
					<el-table-column prop="target.targetTitle" label="目标项">
					</el-table-column>
					<el-table-column prop="target.targetScore" label="目标项分数">
					</el-table-column>
					<el-table-column prop="target.targetWeight" label="目标项权重">
						<template slot-scope="scope">
							{{scope.row.target.targetWeight}}%
						</template>
					</el-table-column>
					<el-table-column prop="recordScore" label="当前打分">
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		scores: [], 
		courses: [],
		students: [],
		groupbys: [],
		records: [],
		targets: [],
		target: null,
		selectScore: null,
		moreVisible: false,
		scoreForm:{
			visible: false,
			scoreId: '',
			scoreStudentId: '',
			scoreCourseId: '',
			scoreTerm: '',
			//scoreTitle: '',
			scoreValue: '',
			scoreRemark: '',
			scoreDate: ''
		},
		scoreRules: {
          scoreStudentId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreCourseId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          /**scoreTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],**/
          scoreTerm: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreValue: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          scoreRemark: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreDate: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
        },
        moreStudents: [],
		recordForm:{
			visible: false,
			recordId: '',  
			recordScoreId: '',  
			recordTargetId: '',  
			recordTitle: '',  
			recordScore: '', 
			recordWeight: ''
		},
		recordRules: {
          recordScoreId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          recordTargetId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          recordTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          recordScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          recordWeight: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ]
        }
	}
	let vueMethods = {
		getScores() {
			let that = this
			postRequst('/user/getScores', that.query).then(function (resp) {
				that.scores = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectScore = resp.rows[0]
					that.getRecords()
					that.getTargets(that.selectScore.scoreCourseId)
				}
			})
		},
		getCourses() {
			let that = this
			postRequst('/user/getCourses', {}).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(course of resp.rows){
						that.courses.push({
							label: course.courseTitle,
							value: course.courseId
						})
					}
				}
			})
		},
		getTargets(courseId) {
			let that = this
			postRequst('/user/getTargets', {courseId: courseId}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					that.targets = []
					for(target of resp.rows){
						that.targets.push({
							label: target.targetTitle,
							value: target.targetId
						})
					}
				}
			})
		},
		getTarget(targetId) {
			let that = this
			postRequst('/user/getTarget', {targetId: targetId}, true).then(function (resp) {
				that.target = resp
			})
		},
		getRecords() {
			let that = this
			that.recordForm.recordScoreId = that.selectScore.scoreId
			postRequst('/user/getScoreRecords', {scoreId: that.selectScore.scoreId}, true).then(function (resp) {
				that.records = resp.rows
			})
		},
		showRecord(row){
			let that = this
			that.selectScore = row
			that.getRecords()
			that.getTargets(row.scoreCourseId)
		},
		changeTarget(nowVal){
			let that = this
			that.getTarget(nowVal)
		}
	}
	function vueCreated() {
		let that = this
		that.getScores()
		that.getCourses()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>